import React, { useEffect, useState } from 'react'
import * as service from '../apis/detail'
import { NavBar, Skeleton } from 'antd-mobile'
import MySwiper from '../components/会员购/MySwiper'
export default function Details(props) {
  const [goodinfo, setgoodinfo] = useState({})
  // const {id} = goodinfo
  useEffect(() => {
    service.goodinfo(props.match.params.id).then((ok) => {
      setgoodinfo(ok.goodinfo)
    })
  }, [])
  console.log(goodinfo);
  // console.log(goodinfo.pics);

  let back = () => {
    props.history.goBack()
  }
  return (
    <div>
      <NavBar onBack={back}>商品详情</NavBar>
      {/* <div>{goodinfos.pics}</div> */}
      {
        goodinfo.pics &&
        goodinfo.pics.length ?
          <>
          
            <MySwiper swiperlist={goodinfo.pics}></MySwiper>
          </>
          :
          <>
            <Skeleton.Title animated />
            <Skeleton.Paragraph lineCount={5} animated />
          </>
      }
    </div>
  )
}